<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <link th:href="@{css/index.css}" rel="stylesheet"/>
    <link th:href="@{css/fonts.css}" rel="stylesheet"/>
    <title>紫卡分析</title>
    <style>
        body{
            text-align: center;
        }
        .weapons_name {
            color: #CC99CC;
        }

        .trend_old {
            color: #FFFFCC;
        }

        .trend {
            color: #FFFF66;
        }

        .weapons_type {
            color: #CC3366;
        }

        .attribute {
            color: #FF9933;
        }

        html {
            background-color: #4D3D54;
        }

        p {
            color: #CC9966;
        }

        .diff-high {
            color: red;
        }

        .diff-flat {
            color: green;
        }

        .diff-low {
            color: #1c84c6;
        }

    </style>
</head>
<body>
<w>1500</w>
<div th:each="r:${data}">
    <div th:each="tm:${r}">
        <div>
            <h3 th:text="${tm.weaponName}"
                class="weapons_name"></h3>
            <p>
                倾向：
                <span th:text="${tm.newDot + '('+ tm.newNum + ')' }" class="trend"></span>
            </p>
            <p>武器类型：<span th:text="${tm.weaponType}" class="weapons_type"></span></p>
            <p>具体分析结果：</p>
            <div th:each="ats:${tm.attributes}">
                <p class="attribute">
                    <span th:text="${ats.attributeName}"></span>
                    <span th:utext="${'('+ ats.lowAttr + '% - ' + ats.highAttr+ '%) | ' + ats.attrDiff}"
                          style="color: #CC99CC;"></span>
                </p>
            </div>
        </div>
        <p>--------------------------------------------------------</p>
    </div>
</div>
</body>
</html>